<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>新增图片</title>
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-container">
	<div class="form form-horizontal" id="form-article-add">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="菜名" id="name" name="">
			</div>
        </div>
        <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="家常炒菜/开胃凉菜/碳酸饮料..." id="desc" name="">
                </div>
        </div>
        <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>价格：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="单价" id="price" name="">
                </div>
        </div>
        <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>类型：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="热菜/冷菜/酒水..." id="typeName" name="">
                </div>
        </div>
        <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>类ID：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="1-热菜 2-冷菜 3-酒水..." id="typeId" name="">
                </div>
        </div>
        <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>图片：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="file" class="input-text" value="" placeholder="" id="uploadFile" name="">
                    <img id="img" src="" alt="" width=300 height=200>
                    <button onclick="doUpload()">上传图片</button>
                </div>
        </div>
        
		<!-- <div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>图片：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div class="uploader-list-container"> 
					<div class="queueList"> 
						<div id="dndArea" class="placeholder">
                            <div id="filePicker-2"></div>
							<p>或将照片拖到这里</p>
						</div>
					</div> 
					<div class="statusBar" style="display:none;">
						<div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
						<div class="info"></div>
						<div class="btns">
							<div id="filePicker2"></div>
							<div class="uploadBtn">开始上传</div>
						</div>
					</div>
				</div>
			</div>
        </div> -->
        
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button onClick="modifyFood()" class="btn btn-secondary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 提交</button>
				<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</div>
	</div>
</div>


<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script> 

<script type="text/javascript">


    // alert(localStorage.getItem('food_id'))
    // alert(window.localStorage.getItem('food_img', img))

function article_save(){
	alert("刷新父级的时候会自动关闭弹层。")
	window.parent.location.reload();
}

let imgurl = null
let ObjectId = localStorage.getItem('food_id')
function modifyFood(){
    let params = {
        name: $('#name').val(),
        price: $('#price').val(),
        desc: $('#desc').val(),
        typeName: $('#typeName').val(),
        typeId: $('#typeId').val() ,
        _id: ObjectId,
        img: imgurl
    }
    //判断上传是否为空
    if(imgurl){
        $.post('http://127.0.0.1:3000/food/update', params, (data)=>{
            console.log('添加成功')
            if(data.err == 0){
                window.parent.location.reload();
            }
        })
    }else{
        alert('请先上传图片')
    }
 
}


//上传图片
function doUpload(){
        let file = $('#uploadFile').get(0).files[0] //获取图片
        let formdata = new FormData()
        formdata.append('imgKey', file)

        $.ajax({
            url: 'http://localhost:3000/file/upload',
            type: 'POST',
            cache: false,   //不必须，一般上传文件不需要缓存
            data: formdata,
            processData: false, //必须,因为data值是FormData对象，不需要对数据做处理
            contentType: false, //必须，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"
            success: function(data){
                // console.log(data)
                if(data.err == 0){
                    imgurl = data.img
                    $('#img').attr('src', `http://localhost:3000${data.img}`)
                }else{
                    alert('上传失败,请重试')
                }
            }
        })
    }
</script>
</body>
</html>